<template>
  <div v-if="showCover" class="pop">
    <div :class="['content', {show: showContent}]">
      <img v-if="selectImg===1" style="width: 672px;height: 1075px;" src="@/assets/img/reception.png" alt="">
      <img v-if="selectImg===2" style="width: 969px;height: 574px;" src="@/assets/img/associated.png" alt="">
    </div>
    <div class="over" @click="() => { this.$emit('update:popup', false) }" />
  </div>
</template>
<script>
export default {
  name: 'Pop',
  props: {
    popup: {
      type: Boolean,
      default: false
    },
    selectImg: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showCover: false,
      showContent: false
    }
  },
  watch: {
    popup(val) {
      const str1 = val ? 'showCover' : 'showContent'
      const str2 = val ? 'showContent' : 'showCover'
      this[str1] = val
      setTimeout(() => {
        this[str2] = val
      }, 200)
    }
  },
  mounted() {
    this.$nextTick(() => {
      const body = document.querySelector('body')
      body.append ? body.append(this.$el) : body.appendChild(this.$el)
    })
  }

}
</script>
<style lang='scss' scoped>
.pop {
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all .2s ease-in-out;
        z-index: 1000;
        max-height: 100%;
        overflow-y: auto;
        margin: 20px 0;
        &.show {
          transform: translate(-50%, -50%) scale(1);
        }
        &::-webkit-scrollbar {
            width: 5px;
            height: 10px;
        }

        &::-webkit-scrollbar-track-piece {
            background-color: rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 6px;
        }

        &::-webkit-scrollbar-thumb:vertical {
            height: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }

        &::-webkit-scrollbar-thumb:horizontal {
            width: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }

    }

    .over {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        filter: alpha(opacity=70);
        z-index: 999;
        background-color: #111111;
    }
}
</style>
